<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.3.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","images":"/images","scheme":"Muse","version":"8.3.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}};
  </script>
<meta property="og:type" content="website">
<meta property="og:title" content="Lawted&#39;s Blog">
<meta property="og:url" content="http://example.com/page/6/index.html">
<meta property="og:site_name" content="Lawted&#39;s Blog">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Lawted Wu">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/page/6/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'en'
  };
</script>
<title>Lawted's Blog</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Lawted's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Lawted Wu</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">67</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/LAWTED" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;LAWTED" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="Back to top">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/05/JS%20U%20DONT%20KNOW%201/%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E5%87%BD%E6%95%B0%E4%BD%9C%E7%94%A8%E5%9F%9F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/05/JS%20U%20DONT%20KNOW%201/%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E5%87%BD%E6%95%B0%E4%BD%9C%E7%94%A8%E5%9F%9F/" class="post-title-link" itemprop="url">块级作用域和函数作用域</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-05 16:13:39" itemprop="dateCreated datePublished" datetime="2021-02-05T16:13:39+08:00">2021-02-05</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:32:10" itemprop="dateModified" datetime="2021-05-07T09:32:10+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <p>块级作用域是类C语言的概念，变量作用域在花括号内起作用，函数作用域是JS的概念，变量在函数内起作用</p>
<h2 id="函数作用域"><a href="#函数作用域" class="headerlink" title="函数作用域"></a>函数作用域</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//e.g.1</span></span><br><span class="line"><span class="keyword">var</span> scope = <span class="string">&quot;global&quot;</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(scope);</span><br><span class="line">&#125;</span><br><span class="line">f();</span><br><span class="line"><span class="comment">//global</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//e.g.2</span></span><br><span class="line"><span class="keyword">var</span> scope = <span class="string">&quot;global&quot;</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(scope);</span><br><span class="line">  <span class="keyword">var</span> scope = <span class="string">&quot;local&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(scope);</span><br><span class="line">&#125;</span><br><span class="line">f();</span><br><span class="line"></span><br><span class="line"><span class="comment">//输出</span></span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line">local</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>因为var声明的是函数作用域的，所以第一个scope是undefined，而第三行的scope，已经在函数内部被声明过了，所有有“local”的值</p>
<h3 id="1-1-tips"><a href="#1-1-tips" class="headerlink" title="1.1 tips"></a>1.1 tips</h3><p>e.g.1 和e.g.2的区别是，第一个没有局部变量去覆盖全局变量，而第二个有，虽然执行在后面但是会先覆盖，所以第一个输出global，第二个输出undefined</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//e.g.1</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"><span class="built_in">console</span>.log(i);<span class="comment">//函数作用域，此时的i有值为10</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//e.g.2</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(i);<span class="comment">//此时不在一个函数内，没有值，报错</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//e.g.3</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br><span class="line">test();<span class="comment">//此时在一个函数内，为10</span></span><br></pre></td></tr></table></figure>


<h3 id="1-2-隐藏内部实现"><a href="#1-2-隐藏内部实现" class="headerlink" title="1.2 隐藏内部实现"></a>1.2 隐藏内部实现</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params">a</span>)</span>&#123;</span><br><span class="line">	b = a + doSomethingElse(a*<span class="number">2</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(b*<span class="number">3</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomethingElse</span>(<span class="params">a</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> a-<span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> b;</span><br><span class="line">doSomething(<span class="number">2</span>); <span class="comment">//15</span></span><br></pre></td></tr></table></figure>
<p>外部作用域是可以访问<code>doSomethingElse(...)</code>和b的，但是并没有必要，超出了<code>doSomething(...)</code>的适用条件，更加合理的设计是把这些私有的内容藏在doSomething()的内部</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doSomething</span>(<span class="params">a</span>)</span>&#123;</span><br><span class="line">	<span class="function"><span class="keyword">function</span> <span class="title">doSomethingElse</span>(<span class="params">a</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> a-<span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> b;</span><br><span class="line">    b = a + doSomethingElse(a*<span class="number">2</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(b*<span class="number">3</span>);</span><br><span class="line">&#125;</span><br><span class="line">doSomething(<span class="number">2</span>); <span class="comment">//15</span></span><br></pre></td></tr></table></figure>


<h3 id="1-3-函数表达式"><a href="#1-3-函数表达式" class="headerlink" title="1.3 函数表达式"></a>1.3 函数表达式</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(a);</span><br><span class="line">&#125;</span><br><span class="line">foo();</span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br></pre></td></tr></table></figure>
<p>这样的表达式需要显式的通过函数名<code>foo()</code> 调用这个函数才能运行其中的代码，而且<code>foo()</code>也污染了全局作用域，可以用函数表达式来解决者两个问题</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(a);</span><br><span class="line">&#125;)();</span><br><span class="line"><span class="built_in">console</span>.log(a)</span><br></pre></td></tr></table></figure>
<p>通过把函数封装成一个函数表达式可以将foo隐藏，并且不用显式的去调用<code>foo()</code></p>
<h3 id="匿名和具名"><a href="#匿名和具名" class="headerlink" title="匿名和具名"></a>匿名和具名</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&quot;I waited 1 second!&quot;</span>);</span><br><span class="line">&#125;,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure>
<p>这就是一个<code>匿名函数表达式</code></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> <span class="title">timeoutHandler</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">&quot;I waited 1 second!&quot;</span>);</span><br><span class="line">&#125;,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure>
<p>这是一个<code>具名函数表达式</code>，解决了函数可读性的问题</p>
<h3 id="立即执行函数表达式"><a href="#立即执行函数表达式" class="headerlink" title="立即执行函数表达式"></a>立即执行函数表达式</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(a);</span><br><span class="line">&#125;)();</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br></pre></td></tr></table></figure>
<p>第一个<code>( )</code>将函数变成了表达式，第二个<code>( )</code>执行了这个函数，这就是<code>立即执行函数IIFE</code>(Immediately Invoked Function Expression)</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">IIFE</span>(<span class="params"><span class="built_in">global</span></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(a); <span class="comment">// 3</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">global</span>.a); <span class="comment">// 2</span></span><br><span class="line">&#125;)(<span class="built_in">window</span>);</span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>
<p>可以将<code>window</code>对象传入进去</p>
<h2 id="块级作用域"><a href="#块级作用域" class="headerlink" title="块级作用域"></a>块级作用域</h2><h3 id="let"><a href="#let" class="headerlink" title="let"></a>let</h3><p>ES6中添加了let，可以声明为块级作用域</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//打出0到9，在花括号里面</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(i);</span><br><span class="line"><span class="comment">//未定义，报错</span></span><br></pre></td></tr></table></figure>


<p><strong>tips:使用let的时候不会在块作用域进行提升，声明的代码被运行之前，声明不存在</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i); <span class="comment">//ReferenceError</span></span><br><span class="line">    <span class="keyword">let</span> i = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="const"><a href="#const" class="headerlink" title="const"></a>const</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">if</span>(foo)&#123;</span><br><span class="line">	<span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">    <span class="keyword">const</span> b = <span class="number">3</span>;</span><br><span class="line">    a = <span class="number">3</span>;</span><br><span class="line">    b = <span class="number">2</span>;<span class="comment">//wrong,Assignment to constant variable.</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br><span class="line"><span class="built_in">console</span>.log(b);<span class="comment">//如果去掉上面一行，则referenceError,因为const也是块级作用域</span></span><br></pre></td></tr></table></figure>



      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/05/JavaScript/instanceof-%E7%9A%84%E7%94%A8%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/05/JavaScript/instanceof-%E7%9A%84%E7%94%A8%E6%B3%95/" class="post-title-link" itemprop="url">instanceof 的用法</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-05 15:58:10" itemprop="dateCreated datePublished" datetime="2021-02-05T15:58:10+08:00">2021-02-05</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:30:44" itemprop="dateModified" datetime="2021-05-07T09:30:44+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="instanceof运算符"><a href="#instanceof运算符" class="headerlink" title="instanceof运算符"></a>instanceof运算符</h1><p>左边是一个对象，右边是表示对象的类</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line"><span class="built_in">console</span>.log(d <span class="keyword">instanceof</span> <span class="built_in">Date</span>);<span class="comment">//true,d是由Date()创建的</span></span><br><span class="line"><span class="built_in">console</span>.log(d <span class="keyword">instanceof</span> <span class="built_in">Object</span>);<span class="comment">//true,所以的对象都是Object的实例</span></span><br><span class="line"><span class="built_in">console</span>.log(d <span class="keyword">instanceof</span> <span class="built_in">Array</span>);<span class="comment">//false，不是一个数组</span></span><br></pre></td></tr></table></figure>
<p>可以用<code>instanceof</code>来判断是不是Array，而<code>typeof</code> 不能</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Array</span>()</span><br><span class="line"><span class="comment">//var a = [1,2,3]</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a);<span class="comment">//object</span></span><br><span class="line"><span class="built_in">console</span>.log(a <span class="keyword">instanceof</span> <span class="built_in">Array</span>);<span class="comment">//Array</span></span><br></pre></td></tr></table></figure>
<p>instanceof 不能用来判断原始属性</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/05/JavaScript/JavaScript%E8%AF%AD%E5%8F%A5%E5%B0%8F%E7%BB%93/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/05/JavaScript/JavaScript%E8%AF%AD%E5%8F%A5%E5%B0%8F%E7%BB%93/" class="post-title-link" itemprop="url">JavaScript 语句小结</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-05 14:41:06" itemprop="dateCreated datePublished" datetime="2021-02-05T14:41:06+08:00">2021-02-05</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:30:50" itemprop="dateModified" datetime="2021-05-07T09:30:50+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="JavaScript-语句小结"><a href="#JavaScript-语句小结" class="headerlink" title="JavaScript 语句小结"></a>JavaScript 语句小结</h1><h2 id="类似C-的"><a href="#类似C-的" class="headerlink" title="类似C++的"></a>类似C++的</h2><h3 id="break"><a href="#break" class="headerlink" title="break"></a>break</h3><h3 id="case"><a href="#case" class="headerlink" title="case"></a>case</h3><h3 id="continue"><a href="#continue" class="headerlink" title="continue"></a>continue</h3><h3 id="default"><a href="#default" class="headerlink" title="default"></a>default</h3><h3 id="do-while"><a href="#do-while" class="headerlink" title="do/while"></a>do/while</h3><h3 id="while"><a href="#while" class="headerlink" title="while"></a>while</h3><h3 id="for"><a href="#for" class="headerlink" title="for"></a>for</h3><h3 id="if-else"><a href="#if-else" class="headerlink" title="if/else"></a>if/else</h3><h3 id="return"><a href="#return" class="headerlink" title="return"></a>return</h3><h3 id="switch"><a href="#switch" class="headerlink" title="switch"></a>switch</h3><h2 id="JavaScript中的"><a href="#JavaScript中的" class="headerlink" title="JavaScript中的"></a>JavaScript中的</h2><h3 id="debugger"><a href="#debugger" class="headerlink" title="debugger"></a>debugger</h3><p>断点调试器</p>
<h3 id="empty"><a href="#empty" class="headerlink" title="empty"></a>empty</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">;</span><br></pre></td></tr></table></figure>
<p>什么都不做</p>
<h3 id="for-in"><a href="#for-in" class="headerlink" title="for/in"></a>for/in</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">in</span> list)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(list[i])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="function"><a href="#function" class="headerlink" title="function"></a>function</h3><p>声明一个函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="label"><a href="#label" class="headerlink" title="label"></a>label</h3><p>给statement指定一个名字，然后就可以在别的地方通过标签名字来引用这段代码</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">domost :</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(i);</span><br><span class="line">  <span class="keyword">if</span>(i === <span class="number">5</span>)</span><br><span class="line">    <span class="keyword">break</span> domost;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="throw"><a href="#throw" class="headerlink" title="throw"></a>throw</h3><p>抛出异常</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(x&lt;<span class="number">0</span>)</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;wrong&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="try-catch-finally"><a href="#try-catch-finally" class="headerlink" title="try,catch,finally"></a>try,catch,finally</h3><h3 id="use-srict"><a href="#use-srict" class="headerlink" title="use srict"></a>use srict</h3><p>对脚本和函数应用严格模式</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/04/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-Arrays/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/04/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-Arrays/" class="post-title-link" itemprop="url">ES6 学习笔记-Arrays</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-04 14:24:00" itemprop="dateCreated datePublished" datetime="2021-02-04T14:24:00+08:00">2021-02-04</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-02-08 14:41:39" itemprop="dateModified" datetime="2021-02-08T14:41:39+08:00">2021-02-08</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/04/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-Numbers/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/04/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-Numbers/" class="post-title-link" itemprop="url">ES6 学习笔记-Numbers</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-04 11:28:35" itemprop="dateCreated datePublished" datetime="2021-02-04T11:28:35+08:00">2021-02-04</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:28:02" itemprop="dateModified" datetime="2021-05-07T09:28:02+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="数值的拓展"><a href="#数值的拓展" class="headerlink" title="数值的拓展"></a>数值的拓展</h1><h2 id="二进制和八进制"><a href="#二进制和八进制" class="headerlink" title="二进制和八进制"></a>二进制和八进制</h2><p>分别用前缀0b(或0B) 和 0o(或0O) 表示</p>
<p>如果要将0b和0O前缀的字符串数值转为十进制，要使用Number方法</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="string">&#x27;0b111&#x27;</span>));<span class="comment">//7</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>(<span class="string">&#x27;0o10&#x27;</span>));<span class="comment">//8</span></span><br></pre></td></tr></table></figure>


<h2 id="Number-isFinite-Number-isNaN"><a href="#Number-isFinite-Number-isNaN" class="headerlink" title="Number.isFinite( ),Number.isNaN( )"></a>Number.isFinite( ),Number.isNaN( )</h2><ul>
<li>Number.isFinite( )用来检查一个数值是否非无穷</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isFinite(<span class="number">15</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isFinite(<span class="literal">NaN</span>));</span><br></pre></td></tr></table></figure>
<ul>
<li>Number.isNaN( )用来检查一个值是否NaN</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isNaN(<span class="string">&#x27;true&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isNaN(<span class="number">9</span>/<span class="literal">NaN</span>));</span><br></pre></td></tr></table></figure>
<p>他们和传统的isFinite( ) 和isNaN( ) 的区别在于，传统方法会将非数值的值转换为数值再判断，而这两个新方法只对数值有效，非数值一律返回false</p>
<h2 id="Number-parseInt-Number-parseFloat"><a href="#Number-parseInt-Number-parseFloat" class="headerlink" title="Number.parseInt( ) ,Number.parseFloat( )"></a>Number.parseInt( ) ,Number.parseFloat( )</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.parseFloat(<span class="string">&#x27;12.345$&#x27;</span>)); <span class="comment">//12.345</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.parseInt(<span class="string">&#x27;12.345&#x27;</span>)); <span class="comment">//12</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Number</span>.parseInt === <span class="built_in">parseInt</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>和全局的方法一样，但是可以减少全局性方法，让语言逐步模块化</p>
<h2 id="Number-isInteger"><a href="#Number-isInteger" class="headerlink" title="Number.isInteger( )"></a>Number.isInteger( )</h2><p>判断一个数是不是整数，注意，因为JS中，整数和浮点数是同样的存储方法，所以3和3.0被视为同一个值</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isInteger(<span class="number">3</span> ));<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isInteger(<span class="number">3.0</span>));<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isInteger(<span class="number">3.1</span>));<span class="comment">//false</span></span><br></pre></td></tr></table></figure>


<h2 id="Number-EPSILON"><a href="#Number-EPSILON" class="headerlink" title="Number.EPSILON"></a>Number.EPSILON</h2><p>一个极小的常量</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.EPSILON.toFixed(<span class="number">20</span>));<span class="comment">//0.00000000000000022204</span></span><br></pre></td></tr></table></figure>
<p>部署一个误差检查函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">withinErrorMargin</span>(<span class="params">left,right</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Math</span>.abs(left-right)&lt;<span class="built_in">Number</span>.EPSILON;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(withinErrorMargin(<span class="number">0.2</span>+<span class="number">0.1</span>,<span class="number">0.3</span>));<span class="comment">//true</span></span><br></pre></td></tr></table></figure>


<h2 id="安全整数和Number-isSafeInteger"><a href="#安全整数和Number-isSafeInteger" class="headerlink" title="安全整数和Number.isSafeInteger( )"></a>安全整数和Number.isSafeInteger( )</h2><p>ES6引入了Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 这两个常量，用来表示这个范围的上下限。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Number</span>.MAX_SAFE_INTEGER === <span class="built_in">Math</span>.pow(<span class="number">2</span>,<span class="number">53</span>)-<span class="number">1</span></span><br><span class="line"><span class="built_in">Number</span>.MIN_SAFE_INTEGER === <span class="built_in">Number</span>.MAX_SAFE_INTEGER</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isSafeInteger(<span class="number">3</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isSafeInteger(<span class="number">1.2</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isSafeInteger(<span class="built_in">Number</span>.MAX_SAFE_INTEGER+<span class="number">1</span>));</span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="literal">false</span></span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>
<h2 id="Math对象的扩展"><a href="#Math对象的扩展" class="headerlink" title="Math对象的扩展"></a>Math对象的扩展</h2><h3 id="Math-trunc"><a href="#Math-trunc" class="headerlink" title="Math.trunc( )"></a>Math.trunc( )</h3><p>用来去除一个数的小数部分，返回整数部分</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Math</span>.trunc(<span class="number">4.1</span>) <span class="comment">//4</span></span><br><span class="line"><span class="built_in">Math</span>.trunc(<span class="string">&#x27;123.345&#x27;</span>) <span class="comment">//123 会先用Number转换为数值</span></span><br></pre></td></tr></table></figure>
<p>对于空值会返回NaN</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Math</span>.trunc(<span class="literal">NaN</span>); <span class="comment">//NaN</span></span><br><span class="line"><span class="built_in">Math</span>.trunc(<span class="string">&#x27;foo&#x27;</span>); <span class="comment">//NaN</span></span><br></pre></td></tr></table></figure>


<h4 id="轮子"><a href="#轮子" class="headerlink" title="轮子"></a>轮子</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Math</span>.trunc = <span class="built_in">Math</span>.trunc||<span class="function"><span class="keyword">function</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> x&lt;<span class="number">0</span>?<span class="built_in">Math</span>.ceil(x):<span class="built_in">Math</span>.floor(x);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="Math-ceil"><a href="#Math-ceil" class="headerlink" title="Math.ceil()"></a>Math.ceil()</h3><p>和Math.floor()相反</p>
<h3 id="Math-sign"><a href="#Math-sign" class="headerlink" title="Math.sign()"></a>Math.sign()</h3><p>用来判断一个数是正数负数还是0</p>
<ul>
<li>正数返回1</li>
<li>负数返回-1</li>
<li>0返回0，-0返回-0</li>
<li>其他返回NaN</li>
</ul>
<h4 id="轮子-1"><a href="#轮子-1" class="headerlink" title="轮子"></a>轮子</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Math</span>.sign() = <span class="built_in">Math</span>.sign || <span class="function"><span class="keyword">function</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">    x = +x; <span class="comment">//converting to a number</span></span><br><span class="line">    <span class="keyword">if</span>(x===<span class="number">0</span>||<span class="built_in">isNaN</span>(x))&#123;</span><br><span class="line">        <span class="keyword">return</span> x;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> x &gt; <span class="number">0</span> ? <span class="number">1</span> : -<span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>




<h3 id="Math-cbrt"><a href="#Math-cbrt" class="headerlink" title="Math.cbrt()"></a>Math.cbrt()</h3><p>cuberoot</p>
<h4 id="轮子-2"><a href="#轮子-2" class="headerlink" title="轮子"></a>轮子</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Math</span>.cbrt = <span class="built_in">Math</span>.cbrt || <span class="function"><span class="keyword">function</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> y = <span class="built_in">Math</span>.pow(<span class="built_in">Math</span>.abs(x),<span class="number">1</span>/<span class="number">3</span>);</span><br><span class="line">  <span class="keyword">return</span> x&gt;<span class="number">0</span>?y:-y;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h3 id="Math-hypot"><a href="#Math-hypot" class="headerlink" title="Math.hypot()"></a>Math.hypot()</h3><p>返回所有参数的平方和的平方根，类似勾股</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Math</span>.hypot(<span class="number">3</span>,<span class="number">4</span>); <span class="comment">//5</span></span><br></pre></td></tr></table></figure>


<h2 id="ES6的新方法"><a href="#ES6的新方法" class="headerlink" title="ES6的新方法"></a>ES6的新方法</h2><h3 id="Math-expm1"><a href="#Math-expm1" class="headerlink" title="Math.expm1()"></a>Math.expm1()</h3><p>Math.expm1(x)  = Math.exp(x)-1</p>
<h3 id="Math-log1p"><a href="#Math-log1p" class="headerlink" title="Math.log1p()"></a>Math.log1p()</h3><p>Math.log1p(x) = Math.log(1+x)</p>
<h3 id="Math-log10"><a href="#Math-log10" class="headerlink" title="Math.log10()"></a>Math.log10()</h3><p>返回以10为底的x的对数，如果x小于0，返回NaN</p>
<h4 id="轮子-3"><a href="#轮子-3" class="headerlink" title="轮子"></a>轮子</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Math</span>.log10 = <span class="built_in">Math</span>.log10||<span class="function"><span class="keyword">function</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.log/<span class="built_in">Math</span>.LN10;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>


<h3 id="Math-log2"><a href="#Math-log2" class="headerlink" title="Math.log2()"></a>Math.log2()</h3><p>返回以2为底的x的对数，如果x小于0，返回NaN</p>
<h3 id="三角函数"><a href="#三角函数" class="headerlink" title="三角函数"></a>三角函数</h3><ul>
<li>Math.sinh(x)</li>
<li>Math.cosh(x)</li>
<li>Math.tanh(x)</li>
</ul>
<h2 id="指数运算符"><a href="#指数运算符" class="headerlink" title="指数运算符"></a>指数运算符</h2><p>指数运算符 **</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="number">2</span> ** <span class="number">2</span> <span class="comment">//4</span></span><br><span class="line"><span class="number">2</span> ** <span class="number">3</span> <span class="comment">//8</span></span><br></pre></td></tr></table></figure>











      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/02/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-String/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/02/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-String/" class="post-title-link" itemprop="url">ES6 学习笔记-String</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-02 11:08:22" itemprop="dateCreated datePublished" datetime="2021-02-02T11:08:22+08:00">2021-02-02</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:28:16" itemprop="dateModified" datetime="2021-05-07T09:28:16+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="字符串的扩展"><a href="#字符串的扩展" class="headerlink" title="字符串的扩展"></a>字符串的扩展</h1><h2 id="codePointAt"><a href="#codePointAt" class="headerlink" title="codePointAt()"></a>codePointAt()</h2><p>能够正确处理4个字节储存的字符，返回一个字符码点</p>
<h2 id="String-fromCodePoint"><a href="#String-fromCodePoint" class="headerlink" title="String.fromCodePoint()"></a>String.fromCodePoint()</h2><p>用于从码点返回对应字符，但是不能识别32位的UTF-16字符</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.fromCharCode(<span class="number">0x20BB7</span>));</span><br><span class="line">ஷ</span><br></pre></td></tr></table></figure>
<p>不能识别大于0xFFFF的码点，所有最高位2被舍弃，返回的U+0BB7对应的字符，而不是U+20BB7对应的字符</p>
<p>String.fromCodePoint()方法可以识别0xFFFF的字符串，作用和codePointAt()相反</p>
<h2 id="字符串的遍历器接口"><a href="#字符串的遍历器接口" class="headerlink" title="字符串的遍历器接口"></a>字符串的遍历器接口</h2><p>遍历器的一个优点是可以识别大于0xFFFF的码点，传统的for循环不行</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> text = <span class="built_in">String</span>.fromCodePoint(<span class="number">0x20BB7</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> text)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//&quot;吉&quot;</span></span><br></pre></td></tr></table></figure>


<h2 id="At"><a href="#At" class="headerlink" title="At()"></a>At()</h2><p>返回字符串给定位置的字符，ES7中可以识别编号大于0xFFFF的字符</p>
<h2 id="includes-startsWith-endsWith"><a href="#includes-startsWith-endsWith" class="headerlink" title="includes(),startsWith(),endsWith()"></a>includes(),startsWith(),endsWith()</h2><ul>
<li>includes() : 返回布尔值，表示是否找到了参数字符串</li>
<li>startsWith() : 返回布尔值，表示参数字符串是否在源字符串的头部</li>
<li>endsWith() : 返回布尔值，表示参数字符串是否在源字符串的尾部</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> s = <span class="string">&#x27;Hello world!&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(s.startsWith(<span class="string">&#x27;Hello&#x27;</span>));<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(s.endsWith(<span class="string">&#x27;!&#x27;</span>));<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(s.includes(<span class="string">&#x27;o&#x27;</span>));<span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>三个方法都支持第二个参数，表示搜索开始的位置</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> s = <span class="string">&#x27;Hello world!&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(s.startsWith(<span class="string">&#x27;Hello&#x27;</span>,<span class="number">6</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(s.endsWith(<span class="string">&#x27;!&#x27;</span>,<span class="number">5</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(s.includes(<span class="string">&#x27;o&#x27;</span>,<span class="number">6</span>));<span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>endsWith 表示前n个字符，而其他两个方法针对从第n个位置知道字符串结束</p>
<h2 id="repeat"><a href="#repeat" class="headerlink" title="repeat()"></a>repeat()</h2><p>repeat 方法返回一个新字符串，表示将源字符串重复n次</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;x&#x27;</span>.repeat(<span class="number">3</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;hello&#x27;</span>.repeat(<span class="number">2</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;na&#x27;</span>.repeat(<span class="number">10</span>));</span><br><span class="line"></span><br><span class="line">xxx</span><br><span class="line">hellohello</span><br><span class="line">nananananananananana</span><br></pre></td></tr></table></figure>
<p>参数如果是小数，会被取整</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;x&#x27;</span>.repeat(<span class="number">2.9</span>));</span><br></pre></td></tr></table></figure>
<p>参数如果是负数或者Infinity，会报错</p>
<h2 id="padStart-padEnd"><a href="#padStart-padEnd" class="headerlink" title="padStart(),padEnd()"></a>padStart(),padEnd()</h2><p>ES7具有字符串补全长度的功能，如果某个字符串不够指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;x&#x27;</span>.padStart(<span class="number">5</span>,<span class="string">&#x27;ab&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;x&#x27;</span>.padEnd(<span class="number">4</span>,<span class="string">&#x27;ab&#x27;</span>));</span><br></pre></td></tr></table></figure>
<p>第一个参数用来指定字符串的最小长度，第二个参数是用来补齐的字符串，如果第一个参数等于或者大于指定的最小长度，则返回原字符串，如果没有第二个参数会用空格</p>
<h2 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h2><p>用反引号标识 ` ，可以在字符串中嵌入变量</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//普通字符串</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`In JavaScript &#x27;\n&#x27; is a line-feed`</span>);</span><br><span class="line"><span class="comment">//多行字符串</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`string text line 1 </span></span><br><span class="line"><span class="string">string text line 2`</span>);</span><br><span class="line"><span class="comment">//字符串中嵌入变量</span></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;Bob&quot;</span> , time = <span class="string">&quot;today&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`Hello <span class="subst">$&#123;name&#125;</span>,how are you <span class="subst">$&#123;time&#125;</span>?`</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//output:</span></span><br><span class="line">In JavaScript <span class="string">&#x27;</span></span><br><span class="line"><span class="string">&#x27;</span> is a line-feed</span><br><span class="line">string text line <span class="number">1</span></span><br><span class="line">string text line <span class="number">2</span></span><br><span class="line">Hello Bob,how are you today?</span><br></pre></td></tr></table></figure>
<p>如果在模板字符串中需要使用反引号，则前面要用反斜杠转义</p>
<p>模板字符串中嵌入变量，需要将变量名写在${ }之中,而且可以进行运算</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> y = <span class="number">2</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;x&#125;</span>+<span class="subst">$&#123;y&#125;</span> = <span class="subst">$&#123;x+y&#125;</span>`</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//1+2 = 3</span></span><br></pre></td></tr></table></figure>
<p>模板字符串中还可以调用函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="string">&quot;Hello World&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`foo <span class="subst">$&#123;fn()&#125;</span> bar`</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//foo Hello World bar</span></span><br></pre></td></tr></table></figure>
<p>如果模板字符串中的变量没有声明，会报错</p>
<h2 id="模板编译"><a href="#模板编译" class="headerlink" title="模板编译"></a>模板编译</h2><p>/(ㄒoㄒ)/~~ 等我学会了正则表达式再来补充！</p>
<h2 id="标签模板-tagged-template"><a href="#标签模板-tagged-template" class="headerlink" title="标签模板 (tagged template)"></a>标签模板 (tagged template)</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">5</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">10</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">tag</span>(<span class="params">s,v1,v2</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(s[<span class="number">0</span>]);</span><br><span class="line">  <span class="built_in">console</span>.log(s[<span class="number">1</span>]);</span><br><span class="line">  <span class="built_in">console</span>.log(s[<span class="number">2</span>]);</span><br><span class="line">  <span class="built_in">console</span>.log(v1);</span><br><span class="line">  <span class="built_in">console</span>.log(v2);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;ok&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(tag <span class="string">`hello <span class="subst">$&#123;a+b&#125;</span> world <span class="subst">$&#123;a*b&#125;</span>`</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li><p>模板标签可以过滤HTML字符串，防止用户输入恶意内容</p>
</li>
<li><p>模板标签可以多语言转换</p>
</li>
<li><p>使用模板标签，在JavaScript中嵌入其他语言</p>
</li>
</ul>
<h2 id="String-raw"><a href="#String-raw" class="headerlink" title="String.raw()"></a>String.raw()</h2><p>String.raw 方法用来充当模板字符串的处理函数，返回一个斜杠都被转义的字符串，对应于替换变量后的模板字符串</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.raw<span class="string">`Hi\n`</span>);</span><br><span class="line">Hi\n <span class="comment">//不会换行</span></span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/01/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-Destructing/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/01/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-Destructing/" class="post-title-link" itemprop="url">ES6 学习笔记 - Destructing</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-01 17:23:22" itemprop="dateCreated datePublished" datetime="2021-02-01T17:23:22+08:00">2021-02-01</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:27:31" itemprop="dateModified" datetime="2021-05-07T09:27:31+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h1><p>ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，者被称为解构(Destructing)</p>
<h2 id="数组的解构赋值"><a href="#数组的解构赋值" class="headerlink" title="数组的解构赋值"></a>数组的解构赋值</h2><h3 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span>[a,b,c] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span>[ , , third] = [<span class="string">&quot;foo&quot;</span>,<span class="string">&quot;bar&quot;</span>,<span class="string">&quot;baz&quot;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span>[x, , y] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span>[head,...tail]=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span>[x,y,...z] = [<span class="string">&#x27;a&#x27;</span>];</span><br></pre></td></tr></table></figure>
<p><strong>如果解构不成功，变量的值就等于undefined</strong></p>
<h4 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h4><p>对于Set结构，也可以使用数组的解构赋值</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span>[x,y,z] = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">&quot;a&quot;</span>,<span class="string">&quot;b&quot;</span>,<span class="string">&quot;c&quot;</span>])</span><br></pre></td></tr></table></figure>


<h4 id="指定默认值"><a href="#指定默认值" class="headerlink" title="指定默认值"></a>指定默认值</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">[x,y=<span class="string">&#x27;b&#x27;</span>] = [<span class="string">&#x27;a&#x27;</span>]; <span class="comment">// x=&#x27;a&#x27;,y=&#x27;b&#x27;</span></span><br><span class="line">[x,y=<span class="string">&#x27;b&#x27;</span>] = [<span class="string">&#x27;a&#x27;</span>,<span class="literal">undefined</span>]; <span class="comment">//x=&#x27;a&#x27; ,y=&#x27;b&#x27;</span></span><br></pre></td></tr></table></figure>
<p>如果不<code>===</code>undefined,默认值是不会生效的</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> [x = <span class="number">1</span>] = [<span class="literal">null</span>];</span><br><span class="line">x <span class="comment">//null</span></span><br></pre></td></tr></table></figure>
<p>因为null不是严格等于undefined ,所以默认值不生效</p>
<h4 id="惰性求值"><a href="#惰性求值" class="headerlink" title="惰性求值"></a>惰性求值</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;aaa&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [x=f()]=[<span class="number">1</span>];</span><br></pre></td></tr></table></figure>
<p> 因为x能够取到值，所以函数f不会执行</p>
<h2 id="对象的解构赋值"><a href="#对象的解构赋值" class="headerlink" title="对象的解构赋值"></a>对象的解构赋值</h2><p>解构不仅可以用于数组，还可以用于对象</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123;foo,bar&#125; = &#123; <span class="attr">foo</span>:<span class="string">&quot;aaa&quot;</span>, <span class="attr">bar</span>:<span class="string">&quot;bbb&quot;</span>&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(foo);<span class="comment">//&quot;aaa&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(bar);<span class="comment">//&quot;bbb&quot;</span></span><br></pre></td></tr></table></figure>


<p>对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。对象的解构赋值的内部机制，是先找到同名的属性，然后再赋给对应的变量。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123;<span class="attr">foo</span>:baz&#125; = &#123;<span class="attr">foo</span>:<span class="string">&quot;aaa&quot;</span>,<span class="attr">bar</span>:<span class="string">&quot;bbb&quot;</span>&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(baz);<span class="comment">//aaa</span></span><br><span class="line"><span class="built_in">console</span>.log(foo);<span class="comment">//foo is not defined</span></span><br></pre></td></tr></table></figure>
<h3 id="解构嵌套的对象"><a href="#解构嵌套的对象" class="headerlink" title="解构嵌套的对象"></a>解构嵌套的对象</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  p:[</span><br><span class="line">    <span class="string">&quot;Hello&quot;</span>,</span><br><span class="line">    &#123;<span class="attr">y</span>:<span class="string">&quot;World&quot;</span>&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> &#123;<span class="attr">p</span>:[x,&#123;y&#125;]&#125; = obj;</span><br><span class="line"><span class="built_in">console</span>.log(x);</span><br><span class="line"><span class="built_in">console</span>.log(y);</span><br></pre></td></tr></table></figure>


<h3 id="声明过变量易错点"><a href="#声明过变量易错点" class="headerlink" title="声明过变量易错点"></a>声明过变量易错点</h3><p>对于已经声明了的变量解构赋值，要非常小心</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//BAD DEMO</span></span><br><span class="line"><span class="keyword">var</span> x;</span><br><span class="line">&#123;x&#125; = &#123;<span class="attr">x</span>:<span class="number">1</span>&#125;;</span><br></pre></td></tr></table></figure>
<p>报错原因，把<code>&#123;x&#125;</code>理解成了一个代码块，从而发生语法错误，只有不把大括号写再行首，才能解决</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//GOOD DEMO</span></span><br><span class="line"><span class="keyword">var</span> x;</span><br><span class="line">(&#123;x&#125; = &#123;<span class="attr">x</span>:<span class="number">1</span>&#125;);</span><br></pre></td></tr></table></figure>


<h2 id="字符串的解构赋值"><a href="#字符串的解构赋值" class="headerlink" title="字符串的解构赋值"></a>字符串的解构赋值</h2><p>字符串也可以解构赋值。这是因为此时，字符串被转化成了一个类似数组的对象</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> [a,b,c,d,e] = <span class="string">&#x27;hello&#x27;</span>;</span><br></pre></td></tr></table></figure>
<p>类似数组的对象都有个length属性，因此可以对这个属性解构赋值</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123;<span class="attr">length</span> :len &#125; = <span class="string">&#x27;hello&#x27;</span></span><br></pre></td></tr></table></figure>


<h2 id="数值和布尔值的解构赋值"><a href="#数值和布尔值的解构赋值" class="headerlink" title="数值和布尔值的解构赋值"></a>数值和布尔值的解构赋值</h2><p>解构赋值的时候，如果等号右边的是数值和布尔值，会先转换成对象</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123;<span class="attr">toString</span> :s&#125; = <span class="number">123</span>;</span><br><span class="line">s === <span class="built_in">Number</span>.prototype.toString; <span class="comment">//true</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">toString</span> :s&#125; = <span class="literal">true</span>;</span><br><span class="line">s === <span class="built_in">Number</span>.prototype.toString; <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>数值和布尔值的包装对象都有toString属性，所以s能够取到值</p>
<p>由于null和undefined无法转换成对象，所以对他们解构赋值会报错</p>
<h2 id="函数参数的解构赋值"><a href="#函数参数的解构赋值" class="headerlink" title="函数参数的解构赋值"></a>函数参数的解构赋值</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">[x,y]</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> x+y;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(add([<span class="number">1</span>,<span class="number">2</span>]));</span><br></pre></td></tr></table></figure>
<p>add的参数不是一个数组，而是通过解构得到的变量x和y</p>
<h2 id="圆括号的使用"><a href="#圆括号的使用" class="headerlink" title="圆括号的使用"></a>圆括号的使用</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">[(b)] = [<span class="number">3</span>];<span class="comment">//正确</span></span><br><span class="line">(&#123;<span class="attr">p</span>:(d)&#125;) = &#123;&#125;);<span class="comment">//正确</span></span><br><span class="line">[(<span class="built_in">parseInt</span>.prop)] = [<span class="number">3</span>];<span class="comment">//正确</span></span><br></pre></td></tr></table></figure>
<p>首先都是赋值语句，而不是声明语句；其次他们的圆括号都不属于模式的一部分。</p>
<p>第一句模式是取第一个成员</p>
<p>第二句模式是p</p>
<p>第三句与第一句一样</p>
<h2 id="用途"><a href="#用途" class="headerlink" title="用途"></a>用途</h2><h3 id="交换变量的值"><a href="#交换变量的值" class="headerlink" title="交换变量的值"></a>交换变量的值</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">[x,y]=[y,x];</span><br></pre></td></tr></table></figure>
<h3 id="函数返回多个值"><a href="#函数返回多个值" class="headerlink" title="函数返回多个值"></a>函数返回多个值</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//返回一个数组</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">example</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> [a,b,c] = example();</span><br><span class="line"></span><br><span class="line"><span class="comment">//返回一个对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">example</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        foo:<span class="number">1</span>;</span><br><span class="line">        bar:<span class="number">2</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> &#123;foo,bar&#125; = example();</span><br></pre></td></tr></table></figure>
<h3 id="函数参数的定义"><a href="#函数参数的定义" class="headerlink" title="函数参数的定义"></a>函数参数的定义</h3><p>解构赋值可以方便地将一组参数与变量名对应起来</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//参数是一组有次序的值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">[x,y,z]</span>) </span>&#123;...&#125;</span><br><span class="line">f([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>])</span><br><span class="line"></span><br><span class="line"><span class="comment">//参数是一组无次序的值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">&#123;x,y,z&#125;</span>) </span>&#123;...&#125;</span><br><span class="line">f(&#123;<span class="attr">z</span>:<span class="number">3</span>,<span class="attr">y</span>:<span class="number">2</span>,<span class="attr">x</span>:<span class="number">1</span>&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="提取JSON数据"><a href="#提取JSON数据" class="headerlink" title="提取JSON数据"></a>提取JSON数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> jsonData = &#123;</span><br><span class="line">	id:<span class="number">42</span>,</span><br><span class="line">    status:<span class="string">&quot;OK&quot;</span>,</span><br><span class="line">    data:[<span class="number">867</span>,<span class="number">5309</span>]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span>&#123;id,status,<span class="attr">data</span>:number&#125; = jsonData;</span><br><span class="line"><span class="built_in">console</span>.log(id,status,number);</span><br><span class="line"><span class="comment">//42,OK,[867,5309]</span></span><br></pre></td></tr></table></figure>
<h3 id="函数参数的默认值"><a href="#函数参数的默认值" class="headerlink" title="函数参数的默认值"></a>函数参数的默认值</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">jQuery.ajax = <span class="function"><span class="keyword">function</span>(<span class="params">url,&#123;</span></span></span><br><span class="line"><span class="function"><span class="params">    <span class="keyword">async</span> = <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="function"><span class="params">    beforeSend = <span class="keyword">function</span> ()&#123;&#125;,</span></span></span><br><span class="line"><span class="function"><span class="params">    cache = <span class="literal">true</span>,</span></span></span><br><span class="line"><span class="function"><span class="params">    complete = <span class="keyword">function</span> ()&#123;&#125;,</span></span></span><br><span class="line"><span class="function"><span class="params">    crossDomain = <span class="literal">false</span>,</span></span></span><br><span class="line"><span class="function"><span class="params">    <span class="built_in">global</span> = <span class="literal">true</span></span></span></span><br><span class="line"><span class="function"><span class="params">&#125;</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="遍历Map结构"><a href="#遍历Map结构" class="headerlink" title="遍历Map结构"></a>遍历Map结构</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">map.set(<span class="string">&#x27;first&#x27;</span>,<span class="string">&#x27;hello&#x27;</span>);</span><br><span class="line">map.set(<span class="string">&#x27;second&#x27;</span>,<span class="string">&#x27;world&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span>[key,value] <span class="keyword">of</span> map)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(key +<span class="string">&quot; is &quot;</span>+value);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> [key] <span class="keyword">of</span> map)&#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> [value] <span class="keyword">of</span> map)&#123;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="输入模块的指定方法"><a href="#输入模块的指定方法" class="headerlink" title="输入模块的指定方法"></a>输入模块的指定方法</h3><p>加载模块的时候，往往需要输入指定哪些方法。解构赋值可以使用</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; SourceMapConsumer,SourceNode &#125; = <span class="built_in">require</span>(<span class="string">&quot;source-map&quot;</span>);</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/01/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-iterator/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/01/ES6/ES6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-iterator/" class="post-title-link" itemprop="url">ES6 学习笔记 - iterator</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-02-01 17:22:09" itemprop="dateCreated datePublished" datetime="2021-02-01T17:22:09+08:00">2021-02-01</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-05-07 09:27:54" itemprop="dateModified" datetime="2021-05-07T09:27:54+08:00">2021-05-07</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Iterator"><a href="#Iterator" class="headerlink" title="Iterator"></a>Iterator</h1><h2 id="简述iterator"><a href="#简述iterator" class="headerlink" title="简述iterator"></a>简述iterator</h2><h3 id="Iterator-的作用"><a href="#Iterator-的作用" class="headerlink" title="Iterator 的作用"></a>Iterator 的作用</h3><ul>
<li>为数据结构提供一个统一的、便捷的接口</li>
<li>使数据结构的成员能够按照次序排列</li>
<li>主要供<code>for...of</code>消费</li>
</ul>
<h3 id="Iterator-的遍历过程"><a href="#Iterator-的遍历过程" class="headerlink" title="Iterator 的遍历过程"></a>Iterator 的遍历过程</h3><ol>
<li>创建一个指针对象，指向当前数据结构的起始位置</li>
<li>第一次调用指针对象的next方法，指向数据结构的第一个成员</li>
<li>第二次调用指针对象的next方法，指向数据结构的第二个成员</li>
<li>不断调用指针对象的next方法，知道它指向数据结构的结束位置</li>
</ol>
<h2 id="数据结构默认的iterator接口"><a href="#数据结构默认的iterator接口" class="headerlink" title="数据结构默认的iterator接口"></a>数据结构默认的iterator接口</h2><h3 id="为一个对象添加Iterator-接口的例子"><a href="#为一个对象添加Iterator-接口的例子" class="headerlink" title="为一个对象添加Iterator 接口的例子"></a>为一个对象添加Iterator 接口的例子</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//为一个对象添加Iterator 接口的例子</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  data:[<span class="string">&quot;hello&quot;</span>,<span class="string">&quot;world&quot;</span>],</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]()&#123;</span><br><span class="line">    <span class="keyword">const</span> self= <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">let</span> index =<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      next ()&#123;</span><br><span class="line">        <span class="keyword">if</span>(index&lt;self.data.length)&#123;</span><br><span class="line">          <span class="keyword">return</span> &#123;</span><br><span class="line">            value :self.data[index++],</span><br><span class="line">            dong : <span class="literal">false</span></span><br><span class="line">          &#125;;</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> &#123;<span class="attr">value</span> :<span class="literal">undefined</span>,<span class="attr">done</span>:<span class="literal">true</span>&#125;;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> obj)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="类似数组的对象调用数组的Symbol-iterator方法的例子"><a href="#类似数组的对象调用数组的Symbol-iterator方法的例子" class="headerlink" title="类似数组的对象调用数组的Symbol.iterator方法的例子"></a>类似数组的对象调用数组的Symbol.iterator方法的例子</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> iterable = &#123;</span><br><span class="line">  <span class="number">0</span>: <span class="string">&#x27;a&#x27;</span>,</span><br><span class="line">  <span class="number">1</span>: <span class="string">&#x27;b&#x27;</span>,</span><br><span class="line">  <span class="number">2</span>: <span class="string">&#x27;c&#x27;</span>,</span><br><span class="line">  length: <span class="number">3</span>,</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]: <span class="built_in">Array</span>.prototype[<span class="built_in">Symbol</span>.iterator]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> iterable) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>而普通的对象如果部署数组的Symbol.iterator就没有用</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> iterable = &#123;</span><br><span class="line">  a: <span class="string">&#x27;a&#x27;</span>,</span><br><span class="line">  b: <span class="string">&#x27;b&#x27;</span>,</span><br><span class="line">  b: <span class="string">&#x27;c&#x27;</span>,</span><br><span class="line">  length: <span class="number">3</span>,</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]: <span class="built_in">Array</span>.prototype[<span class="built_in">Symbol</span>.iterator]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> iterable) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>Symbol.iterator一定要返回一个遍历器对象，否则会报错</strong></p>
<p>有了遍历器接口，数据结构就可以用for..of循环遍历，也可以使用while循环遍历</p>
<h2 id="什么时候调用iterator接口"><a href="#什么时候调用iterator接口" class="headerlink" title="什么时候调用iterator接口"></a>什么时候调用iterator接口</h2><h3 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> set = <span class="keyword">new</span> <span class="built_in">Set</span>().add(<span class="string">&#x27;a&#x27;</span>).add(<span class="string">&#x27;b&#x27;</span>).add(<span class="string">&#x27;c&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span>[x,y] = set;</span><br><span class="line"><span class="built_in">console</span>.log(x); <span class="comment">//a</span></span><br><span class="line"><span class="built_in">console</span>.log(y); <span class="comment">//b</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span>[first,...rest] = set;</span><br><span class="line"><span class="built_in">console</span>.log(first); <span class="comment">//a</span></span><br><span class="line"><span class="built_in">console</span>.log(rest);  <span class="comment">//[&#x27;b&#x27;,&#x27;c&#x27;]</span></span><br></pre></td></tr></table></figure>


<h3 id="拓展运算符"><a href="#拓展运算符" class="headerlink" title="拓展运算符"></a>拓展运算符</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;hello&#x27;</span></span><br><span class="line"><span class="built_in">console</span>.log([...str]); <span class="comment">//[ &#x27;h&#x27;, &#x27;e&#x27;, &#x27;l&#x27;, &#x27;l&#x27;, &#x27;o&#x27; ]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;b&#x27;</span>,<span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"><span class="built_in">console</span>.log([<span class="string">&#x27;a&#x27;</span>,...arr,<span class="string">&#x27;d&#x27;</span>]); <span class="comment">//[ &#x27;a&#x27;, &#x27;b&#x27;, &#x27;c&#x27;, &#x27;d&#x27; ]</span></span><br></pre></td></tr></table></figure>


<h3 id="yield"><a href="#yield" class="headerlink" title="yield*"></a>yield*</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> generator = <span class="function"><span class="keyword">function</span>* (<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">yield</span> <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">yield</span>* [<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">  <span class="keyword">yield</span> <span class="number">5</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> iterator = generator();</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="comment">//&#123; value: 1, done: false &#125;</span></span><br><span class="line"><span class="comment">//&#123; value: 2, done: false &#125;</span></span><br><span class="line"><span class="comment">//&#123; value: 3, done: false &#125;</span></span><br><span class="line"><span class="comment">//&#123; value: 4, done: false &#125;</span></span><br><span class="line"><span class="comment">//&#123; value: 5, done: false &#125;</span></span><br></pre></td></tr></table></figure>
<p>　function*() 是一个函数生成器</p>
<p>　1. 函数生成器特点是函数名前面有一个‘*’<br> 　2. 通过调用函数生成一个控制器<br> 　3. 调用next()方法开始执行函数<br> 　4. 遇到yield函数将暂停<br> 　5. 再次调用next()继续执行函数</p>
<h3 id="其他场合"><a href="#其他场合" class="headerlink" title="其他场合"></a>其他场合</h3><ul>
<li>for…of</li>
<li>Array.from()</li>
<li>Map(),Set(),WeakMap(),WeakSet()</li>
<li>Promise.all()</li>
<li>Promise.race()</li>
</ul>
<h2 id="字符串的iterator接口"><a href="#字符串的iterator接口" class="headerlink" title="字符串的iterator接口"></a>字符串的iterator接口</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> someString = <span class="string">&#x27;hell0&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> iterator = someString[<span class="built_in">Symbol</span>.iterator]();</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"><span class="built_in">console</span>.log(iterator.next());</span><br><span class="line"></span><br><span class="line">&#123; <span class="attr">value</span>: <span class="string">&#x27;h&#x27;</span>, <span class="attr">done</span>: <span class="literal">false</span> &#125;</span><br><span class="line">&#123; <span class="attr">value</span>: <span class="string">&#x27;e&#x27;</span>, <span class="attr">done</span>: <span class="literal">false</span> &#125;</span><br><span class="line">&#123; <span class="attr">value</span>: <span class="string">&#x27;l&#x27;</span>, <span class="attr">done</span>: <span class="literal">false</span> &#125;</span><br><span class="line">&#123; <span class="attr">value</span>: <span class="string">&#x27;l&#x27;</span>, <span class="attr">done</span>: <span class="literal">false</span> &#125;</span><br><span class="line">&#123; <span class="attr">value</span>: <span class="string">&#x27;0&#x27;</span>, <span class="attr">done</span>: <span class="literal">false</span> &#125;</span><br><span class="line">&#123; <span class="attr">value</span>: <span class="literal">undefined</span>, <span class="attr">done</span>: <span class="literal">true</span> &#125;</span><br></pre></td></tr></table></figure>


<h2 id="遍历器对象中的return-throw"><a href="#遍历器对象中的return-throw" class="headerlink" title="遍历器对象中的return(),throw()"></a>遍历器对象中的return(),throw()</h2><p>return()是一个方法，如果for..of循环提前退出，比如出现了break或者continue就会调用return方法，我们可以用return()来清理释放资源</p>
<p>throw()方法一般配合Generator函数使用</p>
<h2 id="for…of-循环"><a href="#for…of-循环" class="headerlink" title="for…of 循环"></a>for…of 循环</h2><p>for…of 循环可以代替数组实例的forEach()方法</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="string">&#x27;red&#x27;</span>,<span class="string">&#x27;green&#x27;</span>,<span class="string">&#x27;blue&#x27;</span>];</span><br><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">element,index</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(element);</span><br><span class="line">  <span class="built_in">console</span>.log(index);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">red</span><br><span class="line"><span class="number">0</span></span><br><span class="line">green</span><br><span class="line"><span class="number">1</span></span><br><span class="line">blue</span><br><span class="line"><span class="number">2</span></span><br></pre></td></tr></table></figure>


<p>JavaScript 原有的for…in 循环，只能够获取键名，没法获取键值，而ES6的for…of循环，允许遍历获取键值</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> arr =[<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;b&#x27;</span>,<span class="string">&#x27;c&#x27;</span>,<span class="string">&#x27;d&#x27;</span>,<span class="string">&#x27;e&#x27;</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> a <span class="keyword">in</span> arr)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a);<span class="comment">// 0 1 2 3 4</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> b <span class="keyword">of</span> arr)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(b);<span class="comment">//a b c d e</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h3 id="Set和Map结构"><a href="#Set和Map结构" class="headerlink" title="Set和Map结构"></a>Set和Map结构</h3><p>Set 和Map结构具有iterator接口，直接用for…of循环</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> cities = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">&#x27;Beijing&#x27;</span>,<span class="string">&#x27;Wuhan&#x27;</span>,<span class="string">&#x27;Chongqin&#x27;</span>])</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> city <span class="keyword">of</span> cities)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(city);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> cities = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">cities.set(<span class="string">&quot;Beijing&quot;</span>, <span class="number">0</span>);</span><br><span class="line">cities.set(<span class="string">&quot;Shanghai&quot;</span>, <span class="number">1</span>);</span><br><span class="line">cities.set(<span class="string">&quot;Wuhan&quot;</span>, <span class="number">2</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> [name, value] <span class="keyword">of</span> cities) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(name + <span class="string">&quot;:&quot;</span> + value);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>三个方法直接可以用的</p>
<ul>
<li>entries()返回一个遍历器对象，用来遍历[键名，键值]</li>
<li>keys()返回一个遍历器对象，用来遍历所有的键名</li>
<li>values()返回一个遍历器对象，用来遍历所有的键值</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;b&#x27;</span>,<span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> pair <span class="keyword">of</span> arr.entries())&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(pair);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="特殊的遍历"><a href="#特殊的遍历" class="headerlink" title="特殊的遍历"></a>特殊的遍历</h3><h4 id="类数组"><a href="#类数组" class="headerlink" title="类数组"></a>类数组</h4><p>并不是所有的类似数组的对象都具有iterator接口，一个简便的解决方法，就是使用Array.from方法将其转化为数组</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arraylike= &#123;<span class="attr">length</span>:<span class="number">2</span>,<span class="number">0</span>:<span class="string">&#x27;a&#x27;</span>,<span class="number">1</span>:<span class="string">&#x27;b&#x27;</span>&#125;;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> x <span class="keyword">of</span> <span class="built_in">Array</span>.from(arraylike))&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(x);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h4><p>使用<code>obeject.keys </code>方法将对象的键名生成一个数组，然后遍历这个数组</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">of</span> <span class="built_in">Object</span>.keys(someObeject))&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(key+<span class="string">&#x27; : &#x27;</span>+someObject[key]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h4 id="jQuery对象"><a href="#jQuery对象" class="headerlink" title="jQuery对象"></a>jQuery对象</h4><p>加上一行：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">jQuery.prototype[symbol.iterator] &#x3D; Array.prototype[Symbol.iterator];</span><br></pre></td></tr></table></figure>


<h3 id="与其他的语法对比"><a href="#与其他的语法对比" class="headerlink" title="与其他的语法对比"></a>与其他的语法对比</h3><h4 id="原始写法"><a href="#原始写法" class="headerlink" title="原始写法"></a>原始写法</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> index=<span class="number">0</span>;index&lt;myArray.length;index++)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(myArray[index]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//缺点：麻烦</span></span><br></pre></td></tr></table></figure>
<h5 id="forEach写法"><a href="#forEach写法" class="headerlink" title="forEach写法"></a>forEach写法</h5><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">myArray.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//缺点：无法中途跳出循环</span></span><br></pre></td></tr></table></figure>
<h4 id="for…in-写法"><a href="#for…in-写法" class="headerlink" title="for…in 写法"></a>for…in 写法</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> index <span class="keyword">in</span> myArray)&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(myArray[index]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//缺点：主要是为遍历对象设计的</span></span><br></pre></td></tr></table></figure>
<h4 id="for-of-写法✔"><a href="#for-of-写法✔" class="headerlink" title="for..of 写法✔"></a>for..of 写法✔</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> value <span class="keyword">of</span> myArray)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>可以使用break</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> n offibonacci)&#123;</span><br><span class="line">	<span class="keyword">if</span>(&gt;<span class="number">1000</span>)</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(n);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/01/LEETCODE%20621%20%E4%BB%BB%E5%8A%A1%E8%B0%83%E5%BA%A6%E5%99%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/02/01/LEETCODE%20621%20%E4%BB%BB%E5%8A%A1%E8%B0%83%E5%BA%A6%E5%99%A8/" class="post-title-link" itemprop="url">LEETCODE 621 任务调度器</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>
      

      <time title="Created: 2021-02-01 09:18:15 / Modified: 09:21:16" itemprop="dateCreated datePublished" datetime="2021-02-01T09:18:15+08:00">2021-02-01</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="LEETCODE-621-任务调度器"><a href="#LEETCODE-621-任务调度器" class="headerlink" title="LEETCODE 621 任务调度器"></a>LEETCODE 621 任务调度器</h1><blockquote>
<p>给你一个用字符数组 tasks 表示的 CPU 需要执行的任务列表。其中每个字母表示一种不同种类的任务。任务可以以任意顺序执行，并且每个任务都可以在 1 个单位时间内执行完。在任何一个单位时间，CPU 可以完成一个任务，或者处于待命状态。</p>
</blockquote>
<p>然而，两个 相同种类 的任务之间必须有长度为整数 n 的冷却时间，因此至少有连续 n 个单位时间内 CPU 在执行不同的任务，或者在待命状态。</p>
<p>你需要计算完成所有任务所需要的 最短时间 。</p>
<blockquote>
<p>输入：tasks = [“A”,”A”,”A”,”B”,”B”,”B”], n = 2<br>输出：8<br>解释：A -&gt; B -&gt; (待命) -&gt; A -&gt; B -&gt; (待命) -&gt; A -&gt; B<br>     在本示例中，两个相同类型任务之间必须间隔长度为 n = 2 的冷却时间，而执行一个任务只需要一个单位时间，所以中间出现了（待命）状态。 </p>
</blockquote>
<blockquote>
<p>输入：tasks = [“A”,”A”,”A”,”A”,”A”,”A”,”B”,”C”,”D”,”E”,”F”,”G”], n =<br>输出：16<br>解释：一种可能的解决方案是：<br>     A -&gt; B -&gt; C -&gt; A -&gt; D -&gt; E -&gt; A -&gt; F -&gt; G -&gt; A -&gt; (待命) -&gt; (待命) -&gt; A -&gt; (待命) -&gt; (待命) -&gt; A</p>
</blockquote>
<p>建立大小为 n+1 的桶子，个数为任务数量最多的那个任务，比如下图，等待时间 n=2，A 任务个数 6 个，我们建立 6 桶子，每个容量为 3：<br>我们可以把一个桶子看作一轮任务</p>
<p><a target="_blank" rel="noopener" href="https://imgchr.com/i/yA9uCt"><img src="https://s3.ax1x.com/2021/01/30/yA9uCt.png" alt="yA9uCt.png"></a></p>
<p>接下来我们添加些其他任务</p>
<p><a target="_blank" rel="noopener" href="https://imgchr.com/i/yA9YUs"><img src="https://s3.ax1x.com/2021/01/30/yA9YUs.png" alt="yA9YUs.png"></a></p>
<p>总结起来：总排队时间 = (桶个数 - 1) * (n + 1) + 最后一桶的任务数</p>
<p>当冷却时间短，任务种类很多时<br>我们刚好排满了任务，那么由于有桶的间隔，我们可以直接把还未装进桶的直接放到每个桶的最后一个</p>
<p><a target="_blank" rel="noopener" href="https://imgchr.com/i/yA9vM8"><img src="https://s3.ax1x.com/2021/01/30/yA9vM8.png" alt="yA9vM8.png"></a></p>
<p>也就是说，我们执行任务所需的时间，就是任务的数量</p>
<p>所以我们有以下几个步骤</p>
<ul>
<li>把任务填充到字母表中，然后alphbet[i]对应着他出现的次数</li>
<li>找的出现最多次的任务</li>
<li>找到出现次数和最多次任务一样多的任务。并且记录下来有几个，这些任务还会放到最后一个桶中，否则最后一个桶只有一个任务</li>
<li>比较总任务数量和<code>次数*(n+1)+cnt</code></li>
</ul>
<figure class="highlight c++"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Solution</span> &#123;</span></span><br><span class="line"><span class="keyword">public</span>:</span><br><span class="line">    <span class="function"><span class="keyword">int</span> <span class="title">leastInterval</span><span class="params">(<span class="built_in">vector</span>&lt;<span class="keyword">char</span>&gt;&amp; tasks, <span class="keyword">int</span> n)</span> </span>&#123;</span><br><span class="line">      <span class="function"><span class="built_in">vector</span>&lt;<span class="keyword">int</span>&gt; <span class="title">alphabet</span><span class="params">(<span class="number">26</span>,<span class="number">0</span>)</span></span>;<span class="comment">//新建一个字母表</span></span><br><span class="line">      <span class="keyword">int</span> size=tasks.size();</span><br><span class="line">      <span class="keyword">int</span> cnt=<span class="number">0</span>;<span class="comment">//记录出现次数和最多次任务一样多的任务的个数</span></span><br><span class="line">      <span class="keyword">int</span> maxfre=<span class="number">0</span>;<span class="comment">//maxfrequency</span></span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">auto</span> t:tasks)&#123;</span><br><span class="line">        <span class="keyword">int</span> tmp=t-<span class="string">&#x27;A&#x27;</span>;</span><br><span class="line">        alphabet[tmp]++;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">int</span> i=<span class="number">0</span>;i&lt;<span class="number">26</span>;i++)&#123;</span><br><span class="line">        maxfre=max(maxfre,alphabet[i]);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">auto</span> a:alphabet)&#123;</span><br><span class="line">        <span class="keyword">if</span>(a==maxfre)&#123;</span><br><span class="line">          cnt++;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> max(size,(maxfre<span class="number">-1</span>)*(n+<span class="number">1</span>)+cnt);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>原作者：popopop<br>链接：<a target="_blank" rel="noopener" href="https://leetcode-cn.com/problems/task-scheduler/solution/tong-zi-by-popopop/">https://leetcode-cn.com/problems/task-scheduler/solution/tong-zi-by-popopop/</a><br>来源：力扣（LeetCode）<br>著作权归作者所有。<br>在原作者基础上加了一些自己的语言。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/28/CSS/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/28/CSS/" class="post-title-link" itemprop="url">CSS基础</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-28 11:23:46" itemprop="dateCreated datePublished" datetime="2021-01-28T11:23:46+08:00">2021-01-28</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-04-27 20:34:55" itemprop="dateModified" datetime="2021-04-27T20:34:55+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="CSS概述"><a href="#CSS概述" class="headerlink" title="CSS概述"></a>CSS概述</h2><p>CSS指层叠样式表</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">一般格式</span><br><span class="line">selector&#123;</span><br><span class="line">	property:value</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">例如：</span><br><span class="line">h1&#123;color:red; font-size:14px;&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>属性大于1个，属性之间要用分号隔开</li>
<li>如果值大于1个单词，则需要加上引号：<br><code>p&#123;font-family:&quot;sans serif&quot;&#125;</code></li>
</ul>
<h2 id="CSS高级语法"><a href="#CSS高级语法" class="headerlink" title="CSS高级语法"></a>CSS高级语法</h2><ol>
<li><p>选择器分组</p>
<p> 可以给多个元素加上同一个样式</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">h1,h2,h3&#123;color:red;&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>继承：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">body&#123;</span><br><span class="line">	color:green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>body里面的样式，如果没有自己的样式就用这个</p>
<h3 id="派生选择器"><a href="#派生选择器" class="headerlink" title="派生选择器"></a>派生选择器</h3><p>通过依据元素在其位置的上下文关系来定义样式</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p&gt;&lt;strong&gt;hello css&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;li&gt;&lt;strong&gt;标签&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;</span><br><span class="line">  &lt;&#x2F;ul&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">li strong&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">strong&#123;</span><br><span class="line">  color:blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>第一个改变了li strong的颜色，第二个因为li strong更细，就只改变第一个文本</p>
<h3 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h3><ol>
<li>id选择器：</li>
</ol>
<ul>
<li>id选择器可以为标有id的HTML元素指定特定的样式</li>
<li>id选择器以”#”来定义</li>
</ul>
<ol start="2">
<li>id选择器和派生选择器：</li>
</ol>
<ul>
<li>常用的方式是id选择器用于建立派生选择器</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p id&#x3D;&quot;a1&quot;&gt;hello css&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;www.baidu.com&quot;&gt;百度&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;divid&quot;&gt;这是一个div&lt;&#x2F;div&gt; </span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#a1 a&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">#divid&#123;</span><br><span class="line">  color:blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>id不使用数字开头，第一个是派生和id同时使用，第二个是id</p>
<h3 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h3><ol>
<li>类选择器以一个点显示</li>
<li>class也可以用作派生选择器</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p class&#x3D;&quot;pclass&quot;&gt;我的第一个段落。&lt;a&gt;你好&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;divclass&quot;&gt;hello div&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.pclass a</span><br><span class="line">&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">.divclass&#123;</span><br><span class="line">  color:purple;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h3><ol>
<li>对带有指定属性的HTML元素设置样式</li>
<li>属性和值选择器</li>
</ol>
<figure class="highlight plain"><figcaption><span>html></span></figcaption><table><tr><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line"> &lt;style type&#x3D;&quot;text&#x2F;css&quot;&gt;</span><br><span class="line">   [title]&#123;</span><br><span class="line">     color:blue;</span><br><span class="line">   &#125;</span><br><span class="line">   [title&#x3D;t]&#123;</span><br><span class="line">     color:red;</span><br><span class="line">   &#125;</span><br><span class="line">  &lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;h1 title&gt;我的第一个HTML页面&lt;&#x2F;h1&gt;</span><br><span class="line">	&lt;p title&#x3D;&quot;t&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<p>如果没有值，则按属性选择器显示，如果有值则按照属性和值选择器显示</p>
<h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">background-attachment 背景图像是否固定或者随着页面的其余部分滚动</span><br><span class="line">background-color      设置元素的背景颜色</span><br><span class="line">background-image      把图片设置为背景</span><br><span class="line">background-position   设置背景图片的起始位置</span><br><span class="line">background-repeat     设置背景图片是否以及如何重复</span><br><span class="line">background-size       规定背景图片的尺寸</span><br><span class="line">background-origin     规定背景图片的定位区域</span><br><span class="line">background-clip       规定背景的绘制区域</span><br></pre></td></tr></table></figure>
<h3 id="文本"><a href="#文本" class="headerlink" title="文本"></a>文本</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">color            文本颜色</span><br><span class="line">direction        文本方向</span><br><span class="line">line-height      行高</span><br><span class="line">letter-spacing   字符间距</span><br><span class="line">text-align       对齐元素中的文本</span><br><span class="line">text-decoration  向文本添加修饰</span><br><span class="line">text-indent      缩进元素中的文本首行</span><br><span class="line">text-transform   元素中的字母</span><br><span class="line">unicode-bidi     设置文本方向</span><br><span class="line">white-space      元素中空白的处理方式</span><br><span class="line">word-spacing     字间距</span><br><span class="line">text-shadow      向文本添加阴影</span><br><span class="line">text-wrap        规定文本的换行规则</span><br></pre></td></tr></table></figure>
<h3 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">font-family     设置字体系列</span><br><span class="line">font-size       设置字体的尺寸</span><br><span class="line">font-style      设置字体风格</span><br><span class="line">font-variant    以小型大些或正常字体显示文本</span><br><span class="line">font-weight     设置字体的粗细</span><br></pre></td></tr></table></figure>
<h3 id="链接"><a href="#链接" class="headerlink" title="链接"></a>链接</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">a:link         普通的、未被访问的链接</span><br><span class="line">a:visited      用户已访问的链接</span><br><span class="line">a:hover        鼠标指针位于链接上方</span><br><span class="line">a:active       链接被点击的时刻</span><br><span class="line">text-decoration用于去掉链接中的下划线</span><br><span class="line">background-color</span><br></pre></td></tr></table></figure>
<p>设置<code>text-decoration:none</code></p>
<h3 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">list-style           简写列表项</span><br><span class="line">list-style-image     列表项图像</span><br><span class="line">list-style-position  列表标志位置</span><br><span class="line">list-style-type      列表类型</span><br></pre></td></tr></table></figure>
<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">border            边框</span><br><span class="line">boder-collapse    合并边框</span><br><span class="line">width             宽</span><br><span class="line">height            高</span><br><span class="line">text-align        对齐</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;table id&#x3D;&quot;tb&quot;&gt;</span><br><span class="line">      &lt;tr&gt;</span><br><span class="line">        &lt;th&gt;姓名&lt;&#x2F;th&gt;</span><br><span class="line">        &lt;th&gt;年龄&lt;&#x2F;th&gt;</span><br><span class="line">        &lt;th&gt;性别&lt;&#x2F;th&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">      &lt;tr class&#x3D;&quot;hao&quot;&gt;</span><br><span class="line">        &lt;td&gt;吴明泽&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;20&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;男&lt;&#x2F;td&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">      &lt;tr&gt;</span><br><span class="line">        &lt;td&gt;张三&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;12&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;男&lt;&#x2F;td&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">      &lt;tr class&#x3D;&quot;hao&quot;&gt;</span><br><span class="line">        &lt;td&gt;小周&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;20&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;女&lt;&#x2F;td&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;&#x2F;table&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#tb&#123;</span><br><span class="line">  border-collapse:collapse;</span><br><span class="line">  width:200px</span><br><span class="line">&#125;</span><br><span class="line">#tb td&#123;</span><br><span class="line">  border:1px solid black;</span><br><span class="line">  padding: 5px;</span><br><span class="line">&#125;</span><br><span class="line">#tb th&#123;</span><br><span class="line">  text-align:center;</span><br><span class="line">  background-color:black;</span><br><span class="line">  color:white;</span><br><span class="line">&#125;</span><br><span class="line">#tb tr.hao td&#123;</span><br><span class="line">  color:red;</span><br><span class="line">  background-color:grey;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="轮廓"><a href="#轮廓" class="headerlink" title="轮廓"></a>轮廓</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">outline       设置轮廓属性</span><br><span class="line">outline-color 设置轮廓颜色</span><br><span class="line">outline-style 设置轮廓样式</span><br><span class="line">outline-width 设置轮廓宽度</span><br></pre></td></tr></table></figure>
<h3 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h3><ul>
<li>CSS定位</li>
<li><ul>
<li>改变元素在页面上的位置</li>
</ul>
</li>
<li>CSS定位机制</li>
<li><ul>
<li>普通流：元素按照其在HTML中的位置顺序决定排布的过程</li>
</ul>
</li>
<li><ul>
<li>浮动：</li>
</ul>
</li>
<li><ul>
<li>绝对布局</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">position       把元素放在一个静态的、相对的、绝对的、固定的位置中</span><br><span class="line">top            元素向上的偏移量</span><br><span class="line">left           元素向左的偏移量</span><br><span class="line">right          元素向右的偏移量</span><br><span class="line">bottom         元素向下的偏移量</span><br><span class="line">overflow       设置元素溢出其区域发生的事情</span><br><span class="line">clip           设置元素显示的形状</span><br><span class="line">vertical-align 设置元素垂直对齐方式</span><br><span class="line">z-index        设置元素的堆叠顺序</span><br></pre></td></tr></table></figure>
<h4 id="CSS-position属性"><a href="#CSS-position属性" class="headerlink" title="CSS position属性"></a>CSS position属性</h4><ul>
<li>static</li>
<li>relative</li>
<li>absolute</li>
<li>fixed       随着页面动</li>
</ul>
<h4 id="CSS-z-index属性"><a href="#CSS-z-index属性" class="headerlink" title="CSS z-index属性"></a>CSS z-index属性</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">z-index: 1;</span><br><span class="line">谁的值大，谁在前面</span><br></pre></td></tr></table></figure>
<h3 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h3><p>float属性可用的值：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">left:元素向左浮动</span><br><span class="line">right：元素向右浮动</span><br><span class="line">none：元素不浮动</span><br><span class="line">inherit：从父级继承浮动属性</span><br></pre></td></tr></table></figure>
<p>clear属性</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">去掉浮动属性</span><br><span class="line">clear属性值：</span><br><span class="line">	left、right：去掉元素向左、向右浮动</span><br><span class="line">	both：左右两侧均去掉浮动</span><br><span class="line">	inherit：从父级继承来的clear属性</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;container&quot;&gt;&lt;div id&#x3D;&quot;fd&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;sd&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;td&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;text&quot;&gt;hello world&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#fd&#123;</span><br><span class="line">  width:50px;</span><br><span class="line">  height:50px;</span><br><span class="line">  background-color:red;</span><br><span class="line">	float:left;</span><br><span class="line">&#125;</span><br><span class="line">#sd&#123;</span><br><span class="line">  width:50px;</span><br><span class="line">  height:50px;</span><br><span class="line">  background-color:blue;</span><br><span class="line">  float:left;</span><br><span class="line">&#125;</span><br><span class="line">#td&#123;</span><br><span class="line">  width:50px;</span><br><span class="line">  height:50px;</span><br><span class="line">  background-color:green;</span><br><span class="line">  float:left;</span><br><span class="line">&#125;</span><br><span class="line">#text&#123;</span><br><span class="line">  clear:left;</span><br><span class="line">&#125;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:100px;</span><br><span class="line">  height:500px;</span><br><span class="line">  background-color:grey</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h3><p>margin、boder、padding、content部分组成</p>
<h3 id="内边距"><a href="#内边距" class="headerlink" title="内边距"></a>内边距</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">padding             设置所有边距</span><br><span class="line">padding-bottom      设置底边距</span><br><span class="line">padding-left        设置左边距</span><br><span class="line">padding-right       设置右边距</span><br><span class="line">padding-top         设置上边距(px)</span><br></pre></td></tr></table></figure>
<h3 id="边框"><a href="#边框" class="headerlink" title="边框"></a>边框</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">border-style          边框样式</span><br><span class="line">border-top-style</span><br><span class="line">border-left-style</span><br><span class="line">border-right-style</span><br><span class="line">border-bottom-style</span><br><span class="line"></span><br><span class="line">border-width          边框宽度</span><br><span class="line">bottom-top-width</span><br><span class="line">bottom-left-width</span><br><span class="line">bottom-right-width</span><br><span class="line">bottom-bottom-width</span><br><span class="line"></span><br><span class="line">border-color          边框颜色</span><br><span class="line">bottom-top-color</span><br><span class="line">bottom-left-color</span><br><span class="line">bottom-right-color</span><br><span class="line">bottom-bottom-color</span><br><span class="line"></span><br><span class="line">border-radius         圆角边框</span><br><span class="line">box-shadow            边框阴影(10px 10px 5px red)</span><br><span class="line">border-image          边框图片</span><br></pre></td></tr></table></figure>
<h3 id="外边距"><a href="#外边距" class="headerlink" title="外边距"></a>外边距</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">margin                设置所有的边距</span><br><span class="line">margin-bottom         设置底边距</span><br><span class="line">margin-left           设置左边距</span><br><span class="line">margin-right          设置右边距</span><br><span class="line">margin-top            设置上边距</span><br></pre></td></tr></table></figure>
<h3 id="外边距合并"><a href="#外边距合并" class="headerlink" title="外边距合并"></a>外边距合并</h3><p>两个盒子的外边距会合并，按照边距多的合并</p>
<h3 id="对齐操作"><a href="#对齐操作" class="headerlink" title="对齐操作"></a>对齐操作</h3><ul>
<li>使用margin属性进行水平对齐（margin：0px auto）</li>
<li>使用position属性进行对齐</li>
<li>使用float属性进行对齐</li>
</ul>
<h3 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h3><h4 id="尺寸操作"><a href="#尺寸操作" class="headerlink" title="尺寸操作"></a>尺寸操作</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">height            设置元素高度</span><br><span class="line">line-height       设置行高</span><br><span class="line">max-height        设置元素最大高度</span><br><span class="line">max-width         设置元素最大宽度</span><br><span class="line">min-width         设置元素最小宽度</span><br><span class="line">min-height        设置元素最小高度</span><br><span class="line">width             设置元素宽度</span><br></pre></td></tr></table></figure>
<h3 id="分类操作"><a href="#分类操作" class="headerlink" title="分类操作"></a>分类操作</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">clear             设置一个元素的侧面是否允许其他的浮动元素</span><br><span class="line">cursor            规定当指向某元素之上时显示的指针类型</span><br><span class="line">display           设置是否及如何显示元素</span><br><span class="line">float             定义元素在哪个方向浮动</span><br><span class="line">position          把元素放置到一个静态的、相对的、绝对的固定的位置</span><br><span class="line">visibility        设置元素可见或者不可见</span><br></pre></td></tr></table></figure>
<h3 id="导航栏"><a href="#导航栏" class="headerlink" title="导航栏"></a>导航栏</h3><h4 id="垂直导航栏"><a href="#垂直导航栏" class="headerlink" title="垂直导航栏"></a>垂直导航栏</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ul&#123;</span><br><span class="line">  list-style-type:none;</span><br><span class="line">  margin:0px;</span><br><span class="line">  padding:0px;</span><br><span class="line">&#125;</span><br><span class="line">a:link,a:visited&#123;</span><br><span class="line">  text-decoration:none;</span><br><span class="line">  display:block;</span><br><span class="line">  background-color:red;</span><br><span class="line">  width:50px;</span><br><span class="line">  text-align:center</span><br><span class="line">&#125;</span><br><span class="line">a:active,a:hover&#123;</span><br><span class="line">  background-color:blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="水平导航栏"><a href="#水平导航栏" class="headerlink" title="水平导航栏"></a>水平导航栏</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ul&#123;</span><br><span class="line">  list-style-type:none;</span><br><span class="line">  margin:0px;</span><br><span class="line">  padding:0px;</span><br><span class="line">&#125;</span><br><span class="line">a:link,a:visited&#123;</span><br><span class="line">  text-decoration:none;</span><br><span class="line">  display:block;</span><br><span class="line">  background-color:red;</span><br><span class="line">  width:50px;</span><br><span class="line">  text-align:center</span><br><span class="line">&#125;</span><br><span class="line">a:active,a:hover&#123;</span><br><span class="line">  background-color:blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">li&#123;</span><br><span class="line">  float:left;</span><br><span class="line">  padding:3px;</span><br><span class="line">  font-size:20px;</span><br><span class="line">  font-weight:bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">opacity:0.5;        透明度</span><br></pre></td></tr></table></figure>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><h4 id="元素选择器"><a href="#元素选择器" class="headerlink" title="元素选择器"></a>元素选择器</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">例如</span><br><span class="line">h1&#123;&#125;</span><br><span class="line">a&#123;&#125;</span><br></pre></td></tr></table></figure>

<h4 id="选择器分组"><a href="#选择器分组" class="headerlink" title="选择器分组"></a>选择器分组</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">例如</span><br><span class="line">h1,h2&#123;&#125;</span><br><span class="line">同配符</span><br><span class="line">*&#123;&#125;</span><br></pre></td></tr></table></figure>
<h4 id="类选择器详解"><a href="#类选择器详解" class="headerlink" title="类选择器详解"></a>类选择器详解</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">1.类选择器</span><br><span class="line">.class&#123;&#125;</span><br><span class="line"></span><br><span class="line">2.结合元素选择器</span><br><span class="line">a.class&#123;&#125;</span><br><span class="line"></span><br><span class="line">3.多类选择器</span><br><span class="line">.class.class&#123;&#125;</span><br><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;p class&#x3D;&quot;p1&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;p class&#x3D;&quot;p2&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;p class&#x3D;&quot;p1 p2&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line"></span><br><span class="line">.p1&#123;</span><br><span class="line">  font-size:30px</span><br><span class="line">&#125;</span><br><span class="line">.p2&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">.p1.p2&#123;</span><br><span class="line">  background-color:lightblue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="id选择器-1"><a href="#id选择器-1" class="headerlink" title="id选择器"></a>id选择器</h4><ol>
<li>ID只能在文档中使用一次，而类可以使用多次</li>
<li>ID选择器不能结合使用</li>
<li>当结合js的时候，需要使用id</li>
</ol>
<h4 id="属性选择器-1"><a href="#属性选择器-1" class="headerlink" title="属性选择器"></a>属性选择器</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[title]&#123;&#125;</span><br><span class="line">[title~&#x3D;&quot;title&quot;]&#123;&#125;      包含title都会变化</span><br><span class="line"></span><br><span class="line">&lt;p title&#x3D;&quot;title&quot;&gt;你好&lt;&#x2F;p&gt;</span><br><span class="line">&lt;p title&#x3D;&quot;title hello&quot;&gt;你好&lt;&#x2F;p&gt;</span><br></pre></td></tr></table></figure>
<h4 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h4><figure class="highlight plain"><figcaption><span>html></span></figcaption><table><tr><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p&gt;我的&lt;strong&gt;第一个&lt;&#x2F;strong&gt;段落。&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">p strong&#123;</span><br><span class="line">  color:red</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>可以很多层</p>
<h4 id="子元素选择器"><a href="#子元素选择器" class="headerlink" title="子元素选择器"></a>子元素选择器</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">p&gt;strong&#123;</span><br><span class="line"> color:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>只能一层</p>
<h4 id="相邻兄弟选择器"><a href="#相邻兄弟选择器" class="headerlink" title="相邻兄弟选择器"></a>相邻兄弟选择器</h4><p>没什么用</p>
<h3 id="3D转换"><a href="#3D转换" class="headerlink" title="3D转换"></a>3D转换</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">2D转换方法</span><br><span class="line">translate()</span><br><span class="line">-webkit-transform:translate(100px,100px);    &#x2F;&#x2F;safari chrome</span><br><span class="line"></span><br><span class="line">rotate()</span><br><span class="line">transform:rotate(60deg);</span><br><span class="line"></span><br><span class="line">scale()</span><br><span class="line">transform:scale(1,2);                     &#x2F;&#x2F;宽高度的倍数</span><br><span class="line"></span><br><span class="line">skew()</span><br><span class="line">transform:skew(50deg,50deg);               &#x2F;&#x2F;绕着X轴倾斜，绕着Y轴倾斜</span><br><span class="line"></span><br><span class="line">matrix()</span><br><span class="line"></span><br><span class="line">3D转换方法</span><br><span class="line">rotateX(deg)</span><br><span class="line">rotateY(deg)</span><br></pre></td></tr></table></figure>
<h3 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">transition                 设置四个过渡属性</span><br><span class="line">transition-property        过渡的名称</span><br><span class="line">transition-duration        过渡效果花费的时间</span><br><span class="line">transition-timing-function 过渡效果的时间曲线</span><br><span class="line">transition-delay           过渡效果开始时间</span><br></pre></td></tr></table></figure>
<h3 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">div&#123;</span><br><span class="line">	animation: anim 5s infinite alternate;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@keyframes&#123;</span><br><span class="line">	0%&#123;background:red; left:0px;top:0px&#125;</span><br><span class="line">	25%&#123;background:red; left:0px;top:0px&#125;</span><br><span class="line">	50%&#123;&#125;</span><br><span class="line">	75%&#123;&#125;</span><br><span class="line">	100%&#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="多列"><a href="#多列" class="headerlink" title="多列"></a>多列</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">column-count</span><br><span class="line">column-gap</span><br><span class="line">column-rule</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;div1&quot;&gt;</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.div1&#123;</span><br><span class="line">  column-count:3;</span><br><span class="line">  column-gap:10px;</span><br><span class="line">  column-rule:5px outset red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="CSS瀑布流效果"><a href="#CSS瀑布流效果" class="headerlink" title="CSS瀑布流效果"></a>CSS瀑布流效果</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.container&#123;</span><br><span class="line">  column-width:250px;</span><br><span class="line">  column-gap:5px;</span><br><span class="line">&#125;</span><br><span class="line">.container div&#123;</span><br><span class="line">  width:250px;</span><br><span class="line">  margin:5px o;</span><br><span class="line">&#125;</span><br><span class="line">.container p&#123;</span><br><span class="line">  text-align:center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/5/"><i class="fa fa-angle-left" aria-label="Previous page"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/page/7/">7</a><a class="extend next" rel="next" href="/page/7/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
  </nav>


<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Lawted Wu</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="Total Visitors">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="Total Views">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  


  <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>


<script>
var options = {
  bottom: '64px', // default: '32px'
  right: '32px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#000',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: true, // default: true,
  label: ' ', // default: ''
  autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  






  
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
